<template>
  <div>
    <!-- 表格绑定分页后的数据 -->
    <el-table :data="data.tableData" style="width: 100%" stripe border>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别" width="180"></el-table-column>
      <el-table-column prop="no" label="编号" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="desc" label="技能描述" width="180"></el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="deleteHandler(scope.row.name)">
            <el-icon><Delete/></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div>
      <el-pagination
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next"
          :total="data.total"
          @size-change="load"
          @current-change="load"
      />
    </div>
    <RouterLink to="/">跳转登录</RouterLink>
  </div>
</template>

<script setup>
import { Delete } from "@element-plus/icons-vue"
import { reactive, computed } from "vue"
import request from "@/utils/request.js";

// 分页配置
const data = reactive({
  tableData:[],
  currentPage: 1, // 初始页码必须为1（否则第一页可能超出范围）
  pageSize: 5,    // 每页显示数量，既每页5条，
  total:0
});

// 专门用于计算属性的函数computed
// 计算当前页数据（核心逻辑，依赖响应式的tableData和pageInfo）
// const tableInfo = computed(() => {
//   // 计算起始索引（当前页-1）*每页条数
//   let start = (pageInfo.currentPage - 1) * pageInfo.pageSize
//   // 计算结束索引：起始索引 + 每页条数
//   let end= start + pageInfo.pageSize
//   // 截取数据（slice不会修改原数组，返回新数组）
//   return tableData.slice(start, end)
// })


//执行网络请求
const load = () => {
  request.get("/getAll" ,{
    params:{
      pageNum: data.currentPage,
      pageSize:data.pageSize
    }

  }).then((res) => {
    console.log(res)
    data.tableData = res.data.list
    data.total = res.data.total
  })
}
//函数调用
load()
const deleteHandler = (info) => {
  alert("删除" + info);
  //将删除的数据id传给服务器，服务器从数据库删除这条数据
  //刷新新界面
};
</script>

